<template>
  <div class="detail-wrapper">
    <van-nav-bar :title="detail.community" left-arrow @click-left="$router.go(-1)">
      <van-icon slot="right" name="share-o" size="18" @click="showShare = true"/>
    </van-nav-bar>
    <div class="detail-main">
      <div class="swipe-wrapper">
        <van-swipe class="my-swipe" :autoplay="6000" indicator-color="white">
        <van-swipe-item v-for="(v, i) in detail.houseImg" :key="i">
            <img v-lazy="v"/>
        </van-swipe-item>
      </van-swipe>
      <div class="vrlogo" @click="GoToVR">
        <img v-lazy="vrlogo" alt="">
      </div>
    </div>
      
      <div class="HouseDetail_info">
        <h3 class="HouseDetail_infoTitle">{{detail.title}}</h3>
        <div class="HouseDetail_tags">
            <van-tag 
                v-for="(v,i) in detail.tags" 
                :key="i"
                color="#E1F5F8" 
                text-color="#39becd"
            >{{v}}</van-tag>
        </div>
        <div class="HouseDetail_infoPrice">
          <div class="HouseDetail_infoPriceItem">
            <div>{{detail.price}}<span class="HouseDetail_month">/月</span></div>
            <div>租金</div>
          </div>
          <div class="HouseDetail_infoPriceItem">
            <div>{{detail.roomType}}</div>
            <div>房型</div>
          </div>
          <div class="HouseDetail_infoPriceItem">
            <div>{{detail.size}}平米</div>
            <div>面积</div>
          </div>
        </div>
        <div class="HouseDetail_infoBasic">
          <div class="am-flexbox-item">
            <div><span class="HouseDetail_title">装修：</span>精装</div>
            <div><span class="HouseDetail_title">楼层：</span>{{detail.floor}}</div>
          </div>
          <div class="am-flexbox-item">
            <div>
                <span class="HouseDetail_title">朝向：</span>
                <span v-for="(v,i) in detail.oriented" :key="i">{{v}}</span>
            </div>
            <div>
              <span class="HouseDetail_title">类型：</span>普通住宅
            </div>
          </div>
        </div>
      </div>
      <div class="HouseDetail_map">
         <h3>小区:{{detail.community}}</h3>
         <baidu-map 
            :center="detail.coord"
            :zoom="13"
            @ready="handler" 
            @click="getClickInfo" 
            style="height:145px" 
            :scroll-wheel-zoom='true'
        >
          <bm-marker :position="markerPoint" @click="infoWindowOpen">
            <bm-info-window :height="0" :width="0" :show="isShowMapMask" @close="infoWindowClose" @open="infoWindowOpen">{{detail.community}}</bm-info-window>
          </bm-marker>
        </baidu-map>
      </div>
      <div class="HouseDetail_about">
        <h3>房屋配套</h3>
        <van-grid :border="false" :clickable="true" :column-num="5">
        <van-grid-item class="item" v-for ="(item,ind) in detail.supporting" :key="ind">
            <i :class="['iconfont',aboutIcon[item]]"></i>
            <p class="about_text">{{item}}</p>
        </van-grid-item>
        </van-grid>
      </div>
      <div class="HouseDetail_set">
        <h3>房源概况</h3>
        <div class="HouseDetail_user">
          <div class="HouseDetail_user_left">
            <van-image
              round
              width="52px"
              height="52px"
              lazy-load
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
            <div class="user_left_info">
              <p>王女士</p>
              <p><i class="iconfont icon-dunpai"></i>已认证房主</p>
            </div>
          </div>
          
          <div class="HouseDetail_user_right">
            <van-button plain type="primary" size="small" color="#33be85">发消息</van-button>
          </div>
        </div>
        <div class="HouseDetail_user_description">
          {{detail.description}}
          <div v-if="!detail.description">暂无房屋描述</div>
        </div>
      </div>
    </div>
    <div class="detail-footer">
        <van-button type="default" icon="star-o">收藏</van-button>
        <van-button type="default">在线咨询</van-button>
        <van-button type="primary">电话预约</van-button>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="shareOptions"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import vrlogo from "@/assets/vrlogo.png"
export default {
  data() {
    return {
      vrlogo,
      showShare: false,
      shareOptions: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      aboutIcon:{
        '电视':"icon-dianshi",
        "冰箱":"icon-bingxiang",
        "洗衣机":"icon-xiyiji",
        "空调":"icon-kongtiao",
        "衣柜":"icon-yigui",
        "天然气":"icon-tianranqi-01",
        "热水器":"icon-haofangtuo400iconfont2reshuiqi",
        "沙发":"icon-shafa",
        "宽带":"icon-wifi",
        "暖气":"icon-shuinuanqigongcheng",
      },
      detail: {
        community: "房源详情",
        coord: {},
        description: "",
        floor: "",
        houseCode: "",
        houseImg: [],
        oriented: [],
        price: 0,
        roomType: "",
        size: 0,
        supporting: [],
        tags: [],
        title: "",
      },
      isShowMapMask:true,
      markerPoint:{
          lng:'121.441111',
          lat:'31.202334',
      }
    };
  },
  created() {
    this.getDetail(this.$route.params.id);
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    GoToVR(){
      this.$router.push({
        path:"/vr",
        query:this.detail,
      });
    },
    async getDetail(id) {
      const { data } = await this.$http.getHouseDetail({ id });
      console.log(data);
      for (const key in this.detail) {
        for (const key1 in data.body) {
          if (key == key1 && key !== "houseImg") {
            this.detail[key] = data.body[key1];
          }
          if (key == "houseImg" && key == key1) {
            this.detail[key] = this.formatImgUrl(data.body[key1]);
          }
        }
      }
    },
    handler ({BMap, map}) {
      const {latitude:lat='31.202334',longitude:lng='121.441111'} = this.detail.coord;
      var point = new BMap.Point(lng,lat)
      map.centerAndZoom(point, 17)
      this.markerPoint = {lat,lng}
    },
    getClickInfo (e) {
      console.log(e.point.lng)
      console.log(e.point.lat)
    //   this.center.lng = e.point.lng
    //   this.center.lat = e.point.lat
    },
    infoWindowClose () {
      this.isShowMapMask = false
    },
    infoWindowOpen () {
      this.isShowMapMask = true
    },
    formatImgUrl(arr) {
      return arr.map((item) => "http://47.102.145.189:8009" + item);
    },
  },
};
</script>

<style lang="less">
.detail-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #F6F5F6;
  .detail-main {
    flex: 1;
    overflow-y: auto;
  }
  .detail-footer{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #cecece;
    text-align: center;
    font-size: 17px;
    color: #999;
    display: flex;
    button{
        flex: 1;
        height: 100%;
        font-size: 17px;
        color: #999;
    }
    button:last-child {
        color: #fff;
    }
  }
}
.swipe-wrapper{
  position: relative;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 212px;
    background-color: #39a9ed;
    img {
      width: 100%;
    }
  }
  .vrlogo{
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-size: 45px 45px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    img{
      width: 100%;
    }
  }
}

.HouseDetail_info{
    padding: 15px;
    background: #fff;
    .HouseDetail_infoTitle{
        font-weight: 400;
        font-size: 16px;
        color: #333;
    }
    .HouseDetail_tags{
        margin-top: 15px;
        display: flex;
        align-items: center;
        span.van-tag{
            margin-right: 10px;
        }   
    }
    .HouseDetail_infoPrice{
        border-top: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
        display: flex;
        margin: 15px 0;
        padding: 15px 0;
        .HouseDetail_infoPriceItem{
            flex: 1;
            margin-left: 8px;
            min-width: 10px;
            text-align: center;
            div:first-child{
                color: #fa5741;
                font-size: 18px;
                font-weight: bolder;
            }
            div:last-child{
                font-size: 14px;
                color:#999;
            }
        }
    }
    .HouseDetail_infoBasic{
        text-align: left;
        overflow: hidden;
        display: flex;
        align-items: center;
        .am-flexbox-item{
            flex:1;
            div{
                color:#333;
                font-size: 13px;
                .HouseDetail_title{
                    color: #999;
                    
                    padding-right: 5px;
                    line-height: 26px;
                }
            }
            
        }
    }

}
.HouseDetail_map{
    margin-top: 10px;
    background: #fff;
    color: #333;
    font-size: 14px;
    h3{
       margin: 0 3%;
       line-height: 44px;
       color: #666; 
       font-size: 14px;
    }
}
.HouseDetail_about{
  background: #fff;
  padding: 0px 10px;
  color: #333;
  h3{
    font-family: Microsoft YaHei;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  .iconfont{
    font-size: 26px;
  }
  .about_text{
    font-size: 14px;
    margin-top: 3px;
  }
}
.HouseDetail_set{
  background: #fff;
  margin-top: 10px;
  padding: 0px 10px;
  color: #333;
  h3{
    font-family: Microsoft YaHei;
    color: #333;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #cecece;
  }
  .HouseDetail_user{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    .HouseDetail_user_left{
      font-size: 14px;
      display: flex;
      .user_left_info{
        margin-left: 17px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      p:last-child{
        font-size: 12px;
        color: #fa5741;
      }
    }
    .HouseDetail_user_right{
      display: flex;
      align-items: center;
      padding: 0 15px;
    }
  }
  .HouseDetail_user_description{
    padding: 10px 0;
    line-height: 1.6;
    font-size: 14px;
    color: #333;
  }
}
// #33be85;
</style>